<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>上传组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="../../js/page.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

</head>

<body>
    <section class="container">
        <h3>
            幻灯片，轮播
        </h3>
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">bootstrap</h5>
                <p>
                    不支持手势，但体积小，功能简单
                </p>
            </div>
            <div class="card-body">
                <iframe src="../bs/carousel.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">默认-swiper</h5>
                <p>
                    支持手势，响应式的轮播组件 依赖
                    <a href="http://www.swiper.com.cn/" target="_blank">swiper</a>
                </p>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/180-nested.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">动态指示点-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="navigation1.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">分页指示器-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/060-pagination-fraction.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">数字指示-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/070-pagination-custom.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">进度条-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/050-pagination-progress.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">间隔-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/100-space-between.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">垂直-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/090-vertical.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">多屏-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/170-slides-per-column.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">多屏居中-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/140-centered-auto.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">内容滚动-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/160-scroll-container.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">上拉下拉-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/refresh-and-load-swiper4.x.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">3D方块-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/230-effect-cube.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">缩略图-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/310-thumbs-gallery-loop.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">视差-swiper</h5>
            </div>
            <div class="card-body">
                <iframe src="http://www.swiper.com.cn/demo/360-parallax.html" width="100%" height="400" frameborder="0" allowfullscreen='true'></iframe>
            </div>
        </div>
        <!-- item end-->

    </section>
</body>

</html>